<template>
    <div>
        <el-row>
            <el-col :span="19">
                <div class="grid-content bg-purple">
                    <el-form :inline="true" :model="queryMap" class="demo-form-inline">
                        <el-form-item label="订餐日期">
                            <el-date-picker
                                    v-model="queryMap.dateArea"
                                    end-placeholder="结束日期"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    type="daterange"
                                    value-format="yyyy-MM-dd"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="订餐状态">
                            <el-select v-model="queryMap.statusId" clearable>
                                <el-option
                                        v-for="status in statusList"
                                        :key="status.statusId"
                                        :label="status.status"
                                        :value="status.statusId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="3" :offset="2">
                <slot name="action-buttons"></slot>
            </el-col>
        </el-row>

        <el-table
                :data="tableData"
                :height="530"
                border
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >
            <el-table-column prop="orderId" type="selection"></el-table-column>
            <el-table-column label="序号" type="index" width="60"></el-table-column>
            <el-table-column label="发起人" prop="empName" width="140"></el-table-column>
            <el-table-column label="部门名称" prop="deptName" width="140"></el-table-column>
            <el-table-column label="订餐人员" prop="members" width="180"></el-table-column>
            <el-table-column label="总金额" prop="totalprice" width="140"></el-table-column>
            <el-table-column label="订餐日期" prop="orderdate" width="200"></el-table-column>
            <el-table-column label="订餐备注" prop="orderNote" width="180"></el-table-column>
            <el-table-column label="订餐状态" prop="status" width="140"></el-table-column>
        </el-table>

        <el-pagination
                :current-page="queryMap.page"
                :page-size="queryMap.limit"
                :page-sizes="[10, 20, 50, 100, 200]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</template>

<script>
export default {
    name:"OrderTable",
    props: {
        queryMap: {
            type: Object,
            required: true,
        },
        tableData: {
            type: Array,
            required: true,
        },
        total: {
            type: Number,
            required: true,
        },
        statusList: {
            type: Array,
            required: true,
        },
    },
    methods: {
        search() {
            this.$emit("search");
        },
        handleSizeChange(val) {
            this.$emit("size-change", val);
        },
        handleCurrentChange(val) {
            this.$emit("current-change", val);
        },
        handleSelectionChange(val) {
            this.$emit("selection-change", val);
        },
    },
};
</script>
